import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
  ListView,
  Dimensions,
  TouchableOpacity
} from 'react-native';

import {PullList} from 'react-native-pull';
import {Actions} from "react-native-router-flux";
import ICON from 'react-native-vector-icons/Ionicons'

export default class extends Component {

  constructor(props) {
    super(props);
    // this.dataSource = [];
    // this.state = {
    //   list: (new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})).cloneWithRows(this.dataSource),
    // };
    this.renderHeader = this.renderHeader.bind(this);
    this.renderRow = this.renderRow.bind(this);
    this.renderFooter = this.renderFooter.bind(this);
    // this.loadMore = this.loadMore.bind(this);
    this.topIndicatorRender = this.topIndicatorRender.bind(this);
    this.onPullRelease = this.onPullRelease.bind(this);
    // this.loadMore();
  }

  onPullRelease(resolve) {
    this.props.onPullReleaseData()
    setTimeout(() => {
      resolve();
    }, 3000);
  }


  topIndicatorRender(pulling, pullok, pullrelease) {
    const hide = {position: 'absolute', left: -10000};
    const show = {position: 'relative', left: 0};
    setTimeout(() => {
      if (pulling) {
        this.txtPulling && this.txtPulling.setNativeProps({style: show});
        this.txtPullok && this.txtPullok.setNativeProps({style: hide});
        this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
      } else if (pullok) {
        this.txtPulling && this.txtPulling.setNativeProps({style: hide});
        this.txtPullok && this.txtPullok.setNativeProps({style: show});
        this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
      } else if (pullrelease) {
        this.txtPulling && this.txtPulling.setNativeProps({style: hide});
        this.txtPullok && this.txtPullok.setNativeProps({style: hide});
        this.txtPullrelease && this.txtPullrelease.setNativeProps({style: show});
      }
    }, 1);
    return (
      <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60}}>
        <ActivityIndicator size="small" color="gray" />
        <Text ref={(c) => {this.txtPulling = c;}}>下拉刷新</Text>
        <Text ref={(c) => {this.txtPullok = c;}}>释放刷新</Text>
        <Text ref={(c) => {this.txtPullrelease = c;}}>正在加载</Text>
      </View>
    );
  }

  render() {
    this.dataSource = null;
    if (!this.props.dataSource.getRowCount()) {
      var DataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.dataSource = DataSource.cloneWithRows([""]);
    }

    return (
      <View style={styles.container}>
        <PullList
          {...this.props}
          style={{}}
          onPullRelease={this.onPullRelease}
          topIndicatorRender={this.topIndicatorRender}
          topIndicatorHeight={60}
          // renderHeader={this.renderHeader}
          dataSource={this.dataSource?this.dataSource:this.props.dataSource}
          pageSize={10}
          initialListSize ={10}
          renderRow={this.renderRow}
          onEndReached={this.props.loadMore}
          onEndReachedThreshold={120}
          renderFooter={this.renderFooter}
          ref={v => this.goodsList = v}
        />

        <TouchableOpacity style={[styles.floatButton, {bottom: 150 ,right:20}]} onPress={()=>{
          this.goodsList.scrollTo(0, 0)
        }}>
          <ICON name='ios-arrow-up' size={20}/>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.floatButton, {bottom: 100 ,right:20}]} onPress={()=>{Actions.jump('dashboard', {refresh:true})}}>
          <ICON name='md-person' size={24} style={{marginBottom:2}}/>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.floatButton, {bottom: 50 ,right:20}]} onPress={()=>{Actions.jump('UserHistory', {refresh:true})}}>
          <ICON name='md-paw' size={24} style={{marginBottom:2}}/>
        </TouchableOpacity>
      </View>
    );
  }

  renderHeader() {
    return (
      <View style={{height: 50, backgroundColor: '#eeeeee', alignItems: 'center', justifyContent: 'center'}}>
        <Text style={{fontWeight: 'bold'}}>This is header</Text>
      </View>
    );
  }

  renderRow(text) {
    if (this.dataSource) {
      return this.renderEmptyRow(text);
    } else {
      return this.props.renderRow(text);
    }
  }

  renderFooter() {
    if(this.props.rowDataAll() || this.props.dataSource.getRowCount() === 0) {
      return null;
    }
    return (
      <View style={{height: 100}}>
        <ActivityIndicator />
      </View>
    );
  }

  renderEmptyRow(){
    return (
      <View style={{height:Dimensions.get('window').height*2/3, justifyContent:'center',alignItems:'center'}}>
        <Text style={{fontSize:20, fontWeight:'800', color:'#ccc'}}>
          正在加载
        </Text>
      </View>
    )
  }

  // loadMore() {
  //   this.dataSource.push({
  //     id: 0,
  //     title: `begin to create data ...`,
  //   });
  //   for(var i = 0; i < 5; i++) {
  //     this.dataSource.push({
  //       id: i + 1,
  //       title: `this is ${i}`,
  //     })
  //   }
  //   this.dataSource.push({
  //     id: 6,
  //     title: `finish create data ...`,
  //   });
  //   setTimeout(() => {
  //     this.setState({
  //       list: this.state.list.cloneWithRows(this.dataSource)
  //     });
  //   }, 1000);
  // }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff',
  },
  floatButton:{
    position:'absolute',
    justifyContent:'center',
    alignItems:'center',
    padding:5,
    borderRadius:30,
    borderWidth:1,
    borderColor:'#e9e9e9',
    backgroundColor: '#f5f6f4',
    width:35,
    height:35
}
});